<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="../../../taglib.jsp" %>
<html>
<head>
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
</head>
<body>
<form class="layui-form layui-form-pane1" action="" value="2">

    <div class="layui-form-item" style="margin-top: 10px;">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-inline">
            <input type="text" id="roleName" name="roleName" lay-verify="required" autocomplete="off" placeholder="请输入角色名称" class="layui-input" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">roleSign</label>
        <div class="layui-input-inline">
            <input type="text" id="roleSign" name="roleSign" lay-verify="required" autocomplete="off" placeholder="请输入sign" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-inline">
            <input type="text" id="description" name="description" lay-verify="required" autocomplete="off" placeholder="请输入描述" class="layui-input">
        </div>
    </div>

    <table class="layui-table">
        <thead>
        <tr>
            <th>一级菜单</th>
            <th>二级菜单</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="item" items="${lists}">
            <tr>
                <td><input name="like[write]" id="${item.id}" value="${item.id}" data_flag="1" title="${item.permissionName}" type="checkbox"></td>
                <c:if test="${item.childList != null}">
                    <td colspan="2" >
                        <table class="layui-table">
                            <c:forEach items="${item.childList}" var="item2">
                                <tr>
                                    <td><input name="like[write]" id="${item2.id}" value="${item2.id}" data_flag="2" title="${item2.permissionName}" type="checkbox"></td>
                                </tr>
                            </c:forEach>
                        </table>
                    </td>
                </c:if>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</form>
<script>
    var $;
    layui.use('form', function(){
        var form = layui.form();
        $ = layui.jquery;
        form.on('checkbox', function(data){
            var arr = new Array();
            <c:forEach items="${lists}" var="item">
            arr.push('${item.id}');
            </c:forEach>
            var value = data.value;
            if(arr.indexOf(value)!= -1){        //表示点击的一级复选框
                if(data.elem.checked){        //$("#"+value).is(':checked')返回的是点击后的状态
                    $("#"+value).parents().siblings().children("table").children().children().children().find("input").siblings().addClass("layui-form-checked");
                    $("#"+value).parents().siblings().children("table").children().children().children().find("input").attr("checked",true);
                    $("#"+value).attr("checked",true);
                }else{
                    $("#"+value).parents().siblings().children("table").children().children().children().find("input").siblings().removeClass("layui-form-checked");
                    $("#"+value).parents().siblings().children("table").children().children().children().find("input").attr("checked",false);
                    $("#"+value).attr("checked",false);
                }
            }else{                              //表示点击的二级菜单
                if(data.elem.checked){        //表示选中一个二级复选框
                    $("#"+value).parent().parent().parent().parent().parent().siblings().find("input").siblings().addClass("layui-form-checked");
                    $("#"+value).parent().parent().parent().parent().parent().siblings().find("input").attr("checked",true);
                    $("#"+value).attr("checked",true);
                }else{                                  //表示取消选中复选框
                    $("#"+value).attr("checked",false);
                    var check_flag = $("#"+value).parent().parent().siblings().children().find("input").is(':checked');
                    if(!check_flag){                    //表示取消最后一个选中的复选框
                        $("#"+value).attr("checked",false);
                        $("#"+value).parent().parent().parent().parent().parent().siblings().find("input").siblings().removeClass("layui-form-checked");
                        $("#"+value).parent().parent().parent().parent().parent().siblings().find("input").attr("checked",false);
                    }else{
                        $("#"+value).siblings().removeClass("layui-form-checked");
                    }
                }
            }
        });
    });
    function submitIframe() {
        var arr = new Array();
        var array = new Array();
        <c:forEach items="${lists}" var="item">
            arr.push('${item.id}');
        <c:if test="${item.childList != null}">
        <c:forEach items="${item.childList}" var="item2">
            arr.push('${item2.id}');
        </c:forEach>
        </c:if>
        </c:forEach>
        for(var i=0;i<arr.length;i++){
            if($("#"+arr[i]).is(':checked')){
                array.push($("#"+arr[i]).val());
            }
        }
        var roleName = $("#roleName").val();
        var roleSign = $("#roleSign").val();
        var description = $("#description").val();
        var obj = new Object();
        obj.roleName = roleName;
        obj.roleSign = roleSign;
        obj.description = description;
        obj.array = array;
        return obj;
    }
</script>
</body>
</html>
